<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Douyu</title>
    <link rel="shortcut icon" href="img/douyu.png"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">


    <script src="js/util.js"></script>
    <script src="js/index.js"></script>


    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">

    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <style>
        h6, p {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .main {
            padding: 0 15px;
        }

        .navbar-dark .navbar-brand {
            color: #c2c2c2;
        }

        .navbar-brand {
            font-size: 2rem;
        }

        .navitem {
            font-size: 1rem;
            margin-right: 0px;
        }

        /*body {*/
            /*padding-right: 0 !important;*/
        /*}*/

    </style>

</head>

<body style="margin-bottom: 20px;">

<div class="main">

    <!-- 导航栏 0-->
    <nav class="navbar bg-dark navbar-dark" style="margin-bottom: 1px;">

        <div class="row">
            <a style="color: white" class="navbar-brand nav-link" href="javascript:void(0);" shortname="hot">Douyu</a>

            <a class="navbar-brand nav-link dropdown-toggle navitem" data-toggle="dropdown" href="javascript:void(0);"
               id="classify" style="margin-left: -30px;margin-top: 16px;">分类</a>
            <div class="dropdown-menu">
                <a style="display: none;" href="#" data-toggle="collapse" data-target="#list"
                   id="tempClick">display-none</a>
                <!--<a class="dropdown-item" href="#" data-toggle="collapse" data-target="#list" shortname="">所有</a>-->
            </div>
        </div>
        <div class="row">
            <a class="navbar-brand nav-link navitem" href="javascript:void(0);" shortname="all">所有直播</a>

            <a class="navbar-brand nav-link navitem" href="javascript:void(0);" shortname="LOL">英雄联盟</a>

            <a class="navbar-brand nav-link navitem" href="javascript:void(0);" shortname="wzry">王者荣耀</a>

            <a class="navbar-brand nav-link navitem" href="javascript:void(0);" id="favo">我的关注</a>

            <a class="navbar-brand nav-link navitem" href="javascript:void(0);" data-toggle="modal"
               data-target="#logindiv">登陆/注册</a>
        </div>


        <!--<ul class="navbar-nav">-->
        <!--<li class="nav-item">-->
        <!--&lt;!&ndash;<a id="btnAll" class="nav-link" href="#" data-toggle="collapse" data-target="#list">☰展开所有分类</a>&ndash;&gt;-->
        <!--<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="classify">分类</a>-->
        <!--<div class="dropdown-menu">-->
        <!--<a style="display: none;" href="#" data-toggle="collapse" data-target="#list" id="tempClick">display-none</a>-->
        <!--&lt;!&ndash;<a class="dropdown-item" href="#" data-toggle="collapse" data-target="#list" shortname="">所有</a>&ndash;&gt;-->
        <!--</div>-->
        <!--</li>-->
        <!--<li class="nav-item">-->
        <!--<a class="nav-link" href="#" shortname="all">所有直播</a>-->
        <!--</li>-->
        <!--<li class="nav-item">-->
        <!--<a class="nav-link" href="#" shortname="wzry">王者荣耀</a>-->
        <!--</li>-->
        <!--<li class="nav-item">-->
        <!--<a class="nav-link" href="#" shortname="LOL">英雄联盟</a>-->
        <!--</li>-->
        <!--<li class="nav-item">-->
        <!--<a class="nav-link" href="#" data-toggle="modal" data-target="#favodiv" id="favo">我的关注</a>-->
        <!--</li>-->
        <!--<li class="nav-item">-->
        <!--<a class="nav-link" href="#" data-toggle="modal" data-target="#logindiv">登陆/注册</a>-->
        <!--</li>-->
        <!--</ul>-->
    </nav>
    <!-- 导航栏 1-->


    <!-- ☰展开所有分类  0-->
    <div id="list" class="collapse">
        <ul class="list-inline">
            <!--<li class="list-inline-item"><a href="#" class="btn btn-link">所有</a></li>-->
        </ul>
    </div>
    <!-- ☰展开所有分类 1-->


    <!-- 登陆/注册 0-->
    <div class="modal fade" id="logindiv" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modelTitleId">登录&nbsp;&nbsp;</h5>
                    <mark>
                        <small>tips：账号不存在会自动注册哦</small>
                    </mark>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- <form> -->
                <div class="modal-body">
                    <div class="form-group">
                        <label for="name">用户名:</label>
                        <input type="text" class="form-control" id="name" placeholder="请输入登录名" required autofocus>
                    </div>
                    <div class="form-group">
                        <label for="pwd">密码:</label>
                        <input type="password" class="form-control" id="pwd" placeholder="请输入密码" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <div style="width:100%">
                        <button id="submit" class="btn btn-primary btn-block">登陆</button>
                        <button type="button" class="btn btn-secondary btn-block" data-dismiss="modal">关闭</button>
                        <!-- <button type="button" class="btn btn-outline-info btn-block">注册</button> -->
                    </div>
                </div>
                <!-- </form> -->
            </div>
        </div>
    </div>
    <!-- 登陆/注册 1-->


    <!-- 热播  0-->
    <div id="hot" class="row">
        <div id="hot1" class="carousel slide col-lg-6" data-ride="carousel" style="margin-bottom: 2px;">

            <!-- 指示符 -->
            <ul class="carousel-indicators">

            </ul>

            <!-- 轮播图片 -->
            <div class="carousel-inner">

            </div>

            <!-- 左右切换按钮 -->
            <a class="carousel-control-prev" href="#hot1" data-slide="prev">
                <span class="carousel-control-prev-icon"></span>
            </a>
            <a class="carousel-control-next" href="#hot1" data-slide="next">
                <span class="carousel-control-next-icon"></span>
            </a>
        </div>

        <div id="hot2" class="carousel slide col-lg-6" data-ride="carousel">
            <!-- 指示符 -->
            <ul class="carousel-indicators">

            </ul>

            <!-- 轮播图片 -->
            <div class="carousel-inner">

            </div>

            <!-- 左右切换按钮 -->
            <a class="carousel-control-prev" href="#hot2" data-slide="prev">
                <span class="carousel-control-prev-icon"></span>
            </a>
            <a class="carousel-control-next" href="#hot2" data-slide="next">
                <span class="carousel-control-next-icon"></span>
            </a>
        </div>

        <div id="hotcopy" style="display: none;">
            <div class="carousel-item">
                <a target="_blank" href="#"><img width="100%" height="100%"
                                                 src="http://static.runoob.com/images/mix/img_fjords_wide.jpg"
                                                 alt=""></a>
                <div class="carousel-caption">
                    <p class="text-white">描述文字!</p>
                </div>
            </div>
        </div>
    </div>
    <!-- 热播  1-->


    <!-- 列表  0-->
    <div class="card-columns">

    </div>

    <div id="listRow" class="row">

    </div>


    <div id="copy" style="display: none;">
        <div class="col-lg-4" style="padding-top:10px;">
            <div class="card text-left text-muted">
                <a target="_blank" href=""><img class="card-img-top img-thumbnail"/></a>
                <div class="card-body" style="padding:2px 2px;">
                    <div style="float:left;"><img class="img-thumbnail" style="width: 58px; height: 58px;"/></div>
                    <div style="padding-left: 70px;margin-top: 3px;">
                        <h6 class="card-title">Title</h6>
                        <p class="card-text">Body</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 列表  1-->


    <div style="text-align: center; margin-top: 10px;">
        <hr>
        <a href="javascript:void(0);" class="text-muted" id="loadmore" more="1">加载更多</a>
    </div>




    <!-- tips 0 -->
    <div class="modal fade" id="tips" style="margin-top: 100px;" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm btn-block" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <!-- tips 1 -->

    <!-- loading 0-->
    <div class="modal" id="loading" data-backdrop="static" data-keyboard="false"
         style="padding: 0px;margin:0px auto; width: 50%">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <img src="./img/loading.gif" width="100%" height="100%" alt="loading">
                </div>
                <div class="modal-footer" style="display:none;">
                    <button type="button" id="closeLoading" class="btn btn-secondary" data-dismiss="modal">Close
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!-- loading 1-->



</div>



</body>

</html>